<template>
  <div style="display: flex;flex-direction: column;justify-content: center;align-content: space-between;">
    <el-row :span="24" class="df" style="margin: 0px 0 20px 0;">
      <el-col :span="12" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;margin-left: 10px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">配送企业:</span>
        <el-input size="mini" v-model="addObject.deliveryCompanyName" disabled></el-input>
      </el-col>
    </el-row>
    <el-row :span="24" style="margin: 0px 0 20px 0;">
      <el-col :span="7" class="df">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">集采批次:</span>
        <el-select @change="changeBatchId" :disabled="addEdit==='view' || addEdit==='edit'" v-model="addObject.batchId" size="mini" placeholder="请选择">
          <el-option v-for="(item,index) in batchList" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="7" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">订单号:</span>
        <el-select @change="changeOrderNo" :disabled="addEdit==='view' || addEdit==='edit'" v-model="addObject.orderNo" size="mini" placeholder="请选择">
          <el-option v-for="(item,index) in orderNoList" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="7" style="display: flex;justify-content: center;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">流水号:</span>
        <el-select @change="changeMedicineNo" :disabled="addEdit==='view' || addEdit==='edit'" v-model="addObject.medicineNo" size="mini" placeholder="请选择">
          <el-option v-for="item in medicineNoList" :key="item.value" :label="item.label" :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.medicineName+'-'+item.shotType+'-'+item.specification }}</span>
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :span="24" style="margin: 0px 0 20px 0;">
      <el-col :span="7" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">药品通用名:</span>
        <el-input size="mini" v-model="addObject.medicineName" disabled style="width: 192px;"></el-input>
      </el-col>

      <el-col :span="7" style="display: flex;justify-content:left;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">品种名称:</span>
        <el-input size="mini" v-model="addObject.shotType" disabled style="width: 192px;"></el-input>
      </el-col>
      <el-col :span="7" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">剂型:</span>
        <el-input size="mini" v-model="addObject.shotType" disabled style="width: 192px;"></el-input>
      </el-col>
    </el-row>
    <el-row :span="24" style="margin: 0px 0 20px 0;">
      <el-col :span="7" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">采购数量:</span>
        <el-input size="mini" disabled v-model="addObject.purchaseAmount" style="width: 192px;"></el-input>
      </el-col>

      <el-col :span="7" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">采购价:</span>
        <el-input size="mini" disabled v-model="addObject.purchasePrice" style="width: 192px;"></el-input>
      </el-col>
      <el-col :span="7" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;">
        <span style="margin-right: 20px;width: 120px;text-align: right;">采购金额:</span>
        <el-input size="mini" disabled v-model="addObject.purchaseFee" style="width: 192px;"></el-input>
      </el-col>
    </el-row>
    <el-row :span="24" style="margin: 0px 0 20px 0;">
      <el-col :span="8" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 12px;width: 147px;text-align: right;">结算发票代码：</span>
        <el-input size="mini" disabled v-model="addObject.invoiceNo" style="width: 270px;"></el-input>
      </el-col>

      <el-col :span="8" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">结算发票附件：</span>
        <a :href="addObject.invoiceFile">{{addObject.invoiceNo}}</a>
      </el-col>
    </el-row>
    <el-row :span="24" style="margin: 0px 0 20px 0;">
      <el-col :span="7" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;text-align: right;">
        <span style="display: block; margin-right: 12px;width: 147px;text-align: right;">退货计量单位：</span>
        <el-select :disabled="addEdit==='view'" v-model="addObject.specification" size="mini" placeholder="请选择">
          <el-option v-for="item in specificationList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- <el-input size="mini" disabled v-model="addObject.specification" style="width: 270px;"></el-input> -->
      </el-col>

      <el-col :span="7" style="display: flex;justify-content: left;align-items: center;margin-right: 54px;">
        <span style="display: block; margin-right: 20px;width: 120px;text-align: right;">退货数量:</span>
        <el-input size="mini" :disabled="addEdit==='view'" v-model="addObject.amount" style="width: 192px;"></el-input>
      </el-col>
      <el-col :span="7" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;">
        <span style="margin-right: 20px;">退货金额:</span>
        <el-input :disabled="addEdit==='view'" v-model="addObject.fee" size="mini" style="width: 192px;"></el-input>
      </el-col>
    </el-row>
    <el-row :span="24" style="margin: 0px 0 20px 0;">
      <el-col :span="7" style="display: flex;justify-content: left;align-items: center;margin-right: 20px;">
        <span style="display: block; margin-right: 20px;width: 185px;text-align: right;">退货原因:</span>
        <el-input size="mini" :disabled="addEdit==='view'" v-model="addObject.reason"></el-input>
      </el-col>

    </el-row>
    <div style="display: flex;justify-content: center;align-items: center;">
      <el-button class="width" style="margin-right:70px;" slot="reference" @click="toTop" type="primary" size="small" v-if="addEdit === 'add' || addEdit === 'edit'">提交</el-button>
      <el-button class="width" size="small" @click="hide">取消</el-button>
    </div>
  </div>
</template>

<script>
import { add, } from "../../api/businessTwo/orderRefund"
export default {
  props: {
    returnTableInfo: {
      type: Object,
    },
    flag2: {
      type: Boolean
    },
    instData: {
      type: Object
    },
    choose: {
      type: Boolean
    },
    addEdit: {
      type: String
    }
  },

  data () {
    return {
      addObject: {
        medicineNo: '',
        batchId: '',
        orderNo: ''
      },
      // 支，瓶，袋
      specificationList: [
        { value: '支', label: '支' },
        { value: '瓶', label: '瓶' },
        { value: '袋', label: '袋' },
      ],
      medicineNoList: [],
      batchList: [],
      orderNoList: [],
      value: '',
      value2: '',
      value3: '',
      value4: '',
      value7: ''
    }
  },
  created () {
    this.state()
  },
  methods: {
    async state () {
      this.addObject = {}
      if (this.addEdit === 'edit' || this.addEdit === 'view') {
        this.addObject = JSON.parse(JSON.stringify(this.returnTableInfo))
      } else if (this.addEdit === 'add') {
        this.addObject.deliveryCompanyName = this.returnTableInfo.selectedCompanyName
        let res = await add({
          deliveryCompanyName: this.returnTableInfo.selectedCompanyName
        })

        // 测试的时候为了快速增加数据，默认选中数据
        let batchList = []
        let medicineNoList = []
        let orderNoList = []
        let data = res.data.data
        data.map((v) => {
          batchList.push({ value: v.batchId, label: v.batchName })
          orderNoList.push({ value: v.orderNo, label: v.orderNo })
          medicineNoList.push({ value: v.medicineNo, label: v.medicineNo })
        })
        this.batchList = this.saveUnique(batchList, 'value')
        this.$set(this.addObject, 'batchId', batchList[0].value)
        this.$set(this.addObject, 'orderNo', orderNoList[0].value)
        this.$set(this.addObject, 'medicineNo', medicineNoList[0].value)
        this.$set(this.addObject, 'medicineName', medicineNoList[0].value)
        this.$set(this.addObject, 'amount', 1)
        this.$set(this.addObject, 'fee', 1)
        this.$set(this.addObject, 'medicineNo', medicineNoList[0].value)
        this.addObject.specification = this.specificationList[0].value


        // let batchList = []
        // let data = res.data.data
        // data.map((v) => {
        //   batchList.push({ value: v.batchId, label: v.batchName })
        // })
        // this.batchList = this.saveUnique(batchList, 'value')
        // this.$set(this.addObject, 'batchId', '')
        // this.$set(this.addObject, 'orderNo', '')
        // this.$set(this.addObject, 'medicineNo', '')
        // this.$set(this.addObject, 'medicineName', '')
        // this.$set(this.addObject, 'amount', '')
        // this.$set(this.addObject, 'fee', '')
        // this.tableData = res.data.data
        // this.addObject.specification = ''

        if (this.addEdit === 'edit' || this.addEdit === 'view') {
          this.addObject = JSON.parse(JSON.stringify(this.returnTableInfo))
        }
      }
    },
    async changeBatchId (id) {
      this.$set(this.addObject, 'orderNo', '')
      this.$set(this.addObject, 'medicineNo', '')
      let batchName = ''
      this.batchList.forEach(item => {
        if (item.value === id) {
          batchName = item.label
          this.addObject.batchName = batchName
          this.addObject.batchId = id
        }
      })
      let res = await add({
        deliveryCompanyName: this.returnTableInfo.selectedCompanyName,
        batchName: batchName
      })
      let orderNoList = []
      let data = res.data.data
      data.map((v) => {
        orderNoList.push({ value: String(v.orderNo), label: String(v.orderNo) })
      })
      this.orderNoList = this.saveUnique(orderNoList, 'value')
      this.medicineNoList = []
      this.addObject = Object.assign({}, { deliveryCompanyName: this.returnTableInfo.selectedCompanyName, batchName: batchName, batchId: id })
    },
    async changeOrderNo (orderNum) {
      let orderNo = ''
      this.orderNoList.forEach(item => {
        if (item.value === orderNum) {
          orderNo = item.label
          this.addObject.orderNo = orderNo
        }
      })
      let res = await add({
        deliveryCompanyName: this.returnTableInfo.selectedCompanyName,
        batchName: this.addObject.batchName,
        orderNo: orderNo,
      })
      let medicineNoList = []
      let data = res.data.data
      data.map((v) => {
        medicineNoList.push({ value: String(v.medicineNo), label: String(v.medicineNo), medicineName: v.medicineName, shotType: v.shotType, specification: v.specification })
      })
      this.medicineNoList = this.saveUnique(medicineNoList, 'value')
      this.addObject = Object.assign({}, { deliveryCompanyName: this.returnTableInfo.selectedCompanyName, batchName: this.addObject.batchName, batchId: this.addObject.batchId, orderNo: this.addObject.orderNo })
    },
    async changeMedicineNo (medicineNo) {
      let res = await add({
        deliveryCompanyName: this.returnTableInfo.selectedCompanyName,
        batchName: this.addObject.batchName,
        orderNo: this.addObject.orderNo,
        medicineNo: medicineNo
      })
      let data = res.data.data
      this.addObject = Object.assign({}, data[0], {
        batchId: this.addObject.batchId,
        orderNo: this.addObject.orderNo,
        medicineNo: this.addObject.medicineNo,
        deliveryCompanyName: this.addObject.deliveryCompanyName,
        specification: this.specificationList[0].value
      })
    },
    getTo () {
      this.$emit("getTo", this.tableData)
    },
    number () {

    },
    saveUnique (arr, key) {
      let newArr = [];
      let obj = {};
      for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i][key]]) {
          newArr.push(arr[i])
          obj[arr[i][key]] = true
        }
      }
      return newArr
    },
    handleSelectionChange (val) {
      this.num = val.length
      this.priceSum = 0


      val.map((v) => {
        if (v.purchaseFee === null) {
          v.purchaseFee = 0
        }
        this.priceSum += parseFloat(v.purchaseFee)
        return v
      })
      this.tableData1 = val
    },
    typec (a) {
      if (a.row.status == 0) {
        a.row.label = "已入库"
        return "success"
      } else {
        a.row.label = "未入库"
        return "info"
      }
    },
    toTop () {
      if (!this.addObject.batchId) {
        return this.$message.warning('请选择集采批次！')
      }
      if (!this.addObject.medicineName) {
        return this.$message.warning('请选择订单！')
      }
      if (!this.addObject.amount) {
        return this.$message.warning('请输入退货数量！')
      }
      if (!this.addObject.fee) {
        return this.$message.warning('请输入退货金额！')
      }
      this.$emit("chooseData", this.addObject)
      // this.$message.success('提交成功');
      // this.hide()
    },

    hide () {
      this.$emit("changeTwo", false)
    }
  }
}
</script>

<style lang="scss" scoped>
.df {
  display: flex;
  align-items: center;
}

.jcsb {
  justify-content: space-between;
}

.el-table {
  margin-bottom: 30px;
}

.ml {
  margin-left: 70px;
}

::v-deep th {
  background-color: #f1f1f1;
}

::v-deep .el-table__cell {
  height: 70px !important;
}

h2 {
  font-size: 18px;
}

.width {
  width: 120px;
  height: 37px;
}

.ret {
  margin-left: 30%;
  margin-right: 70px;
}

.number {
  font-size: 17px;
  color: #72c7f8;
}

::v-deep th.el-table__cell {
  background-color: #fafafa;
}

::v-deep .el-table__cell {
  border-right: 1px solid #ebeef7 !important;
  text-align: center;
}

::v-deep .cell {
  display: flex;
  justify-content: center;
}
</style>
